import React, { PureComponent } from 'react';
import {
  notification,
  Card,
  Select,
  Pagination,
  Button,
  Switch,
  Checkbox,
  Timeline,
  Table,
} from 'antd';
import { setCookieLocale, getCookieLocale } from '../utils/i18n';
import cookie from '../utils/cookie';
import intl from 'react-intl-universal';
import ThemeColor from '../components/theme/ThemeColor';
const CheckboxGroup = Checkbox.Group;

const { Option } = Select;
const themePrimaryColor = 'theme';

class ChangeTheme extends PureComponent {
  handleChange = value => {
    if (setCookieLocale(value)) {
      window.location.reload();
    } else {
      notification.error({
        message: `设置语言环境参数失败,系统不包含指定语言：${value}`,
      });
    }
  };

  changeThemeSetting = (key, color) => {
    cookie.set(themePrimaryColor, key);
    window.location.reload();
  };

  render() {
    let currentLocal = getCookieLocale();
    let primaryColor = cookie.get(themePrimaryColor);
    const plainOptions = ['Apple', 'Pear', 'Orange'];
    const dataSource = [
      {
        key: '1',
        name: '胡彦斌',
        age: 32,
        address: '西湖区湖底公园1号',
      },
      {
        key: '2',
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园1号',
      },
    ];
    const columns = [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
      },
    ];

    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
      }
    };

    return (
      <div>
        <Card title={intl.get('test.themeAndLocale')}>
          <Select defaultValue={currentLocal} style={{ width: 120 }} onChange={this.handleChange}>
            <Option value="en-US">英文(en-US)</Option>
            <Option value="zh-CN">中文(zh-CN)</Option>
          </Select>
          <ThemeColor
            title={'app.setting.themecolor'}
            value={primaryColor}
            onChange={(key, color) => this.changeThemeSetting(key, color)}
          />
        </Card>
        <Card title={intl.get('test.pageShow')}>
          <div style={{ paddingTop: 10 }}>
            <Button type="primary">{intl.get('test.buttom')}</Button>
          </div>
          <div style={{ paddingTop: 10 }}>
            <Switch defaultChecked />
          </div>
          <div style={{ paddingTop: 10 }}>
            <CheckboxGroup options={plainOptions} value={plainOptions} />
          </div>
          <div style={{ paddingTop: 10 }}>
            <Pagination showSizeChanger defaultCurrent={3} total={500} />
          </div>
          <div style={{ paddingTop: 10 }}>
            <Timeline>
              <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
              <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
              <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
              <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
            </Timeline>
          </div>
          <div style={{ paddingTop: 10 }}>
            <Table dataSource={dataSource} columns={columns} size="small" rowKey={record => record.key} rowSelection={rowSelection}/>
          </div>
          <div style={{ paddingTop: 10 }}>
            <div>{intl.get('test.show')}</div>
          </div>
        </Card>
      </div>
    );
  }
}

export default ChangeTheme;
